﻿<div class="sample_title">Form Datepicker</div>

sample:<br />
<div class="sample_preview">
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        $(document).ready(function() {
            // Create Form
            $('#form6').setupForm([
                { name: 'province_code6', type: 'text', size: 'short', readonly: true },
                { name: 'province_name6', type: 'text', 
                    autocomplete: {
                        source: gs_path + '/AjaxJSON/Province/',
                        minLength: 1,
                        select: function(event, ui) {
                            $('#province_code6').val(ui.item.value);
                            $('#province_name6').val(ui.item.display);
                            $('#country_code6').val(ui.item.country_code);
                            $('#country_name6').val(ui.item.country_name);
                            return false;
                        }
                    }, size: 'medium', noempty: true
                },
                { name: 'country_code6', type: 'text', size: 'short', readonly: true },
                { name: 'country_name6', type: 'text', size: 'medium', readonly: true }
            ]);
        });
    //--><!]]></script>
    <form id="form6" onsubmit="return false;">
    <table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label">Nama Province</td>
        <td><input id="province_code6" /> <input id="province_name6" /></td>
    </tr>
    <tr>
        <td class="label">Negara</td>
        <td><input id="country_code6" /> <input id="country_name6" /></td>
    </tr>
    </table>
    </form>
</div><br />
code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            // Create Form
            $('#form_master').setupForm([
                { name: 'province_code', type: 'text', size: 'short', readonly: true },
                { name: 'province_name', type: 'text', 
                    autocomplete: {
                        source: gs_path + '/AjaxJSON/Province/',
                        minLength: 1,
                        select: function(event, ui) {
                            $('#province_code').val(ui.item.value);
                            $('#province_name').val(ui.item.display);
                            $('#country_code').val(ui.item.country_code);
                            $('#country_name').val(ui.item.country_name);
                            return false;
                        }
                    }, size: 'medium', noempty: true
                },
                { name: 'country_code', type: 'text', size: 'short', readonly: true },
                { name: 'country_name', type: 'text', size: 'medium', readonly: true }
            ]);
        });
    &lt;/script&gt;
        
    &lt;form id="form_master" onsubmit="return false;"&gt;
    &lt;table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Nama Province&lt;/td&gt;
        &lt;td&gt;&lt;input id="province_code" /&gt; &lt;input id="province_name" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Negara&lt;/td&gt;
        &lt;td&gt;&lt;input id="country_code" /&gt; &lt;input id="country_name" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
    <% for (int i = 0, max_i = 26; i < max_i; i++) { Response.Write("<br />"); } %>
</div><br />

<fieldset>
    <legend>Field Configuration</legend>
    <table class="tb_apiconfig">
    <tr>
        <td class="label">type</td>
        <td><font color="blue">(string) default: text</font><br />
            Set Type of field into <u>text</u>
        </td>
    </tr>
    <tr>
        <td class="label">autocomplete</td>
        <td><font color="blue">(object)</font><br />
            Set autocomplete when typing in input field <button onclick="$('#api_form_detailautocomplete').toggle();">Show/Hide Detail</button><br />
            
            <div id="api_form_detailautocomplete" style="display:none;">
                <table class="tb_apiconfig">
                <tr>
                    <td class="label">source <font color="red"><sup>*</sup></font></td>
                    <td><font color="blue">(string)</font><br />
                        Remote Data Adress. (response Object in Array should have key : <u>value</u> and <u>display</u>)
                    </td>
                </tr>
                <tr>
                    <td class="label">minLength</td>
                    <td><font color="blue">(numeric) default: 0</font><br />
                        Minimum input character to execute autocomplete request data
                    </td>
                </tr>
                <tr>
                    <td class="label">select(event, ui)</td>
                    <td><font color="blue">(function)</font><br />
                        Will execute after select value in autocomplete
                    </td>
                </tr>
                <tr><td colspan="2"><a href="http://jqueryui.com/demos/autocomplete" target="_blank">More Info about jQuery-UI Autocomplete</a></td></tr>
                </table>
            </div>
        </td>
    </tr>
    </table>
</fieldset>